<template>
  <!-- 微信支付页面-->
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      style="height: 65px"
      title="支付方式"
      left-arrow
      @click-left="onClickLeft" />

    <div style="height: 120px">
      <!-- 金额 -->
      <van-row>
        <van-col
          span="24"
          v-if="(order.productPrice != '') & (order.payStatusCode == '')"
          >￥{{ order.productPrice }}</van-col
        >
        <van-col
          span="24"
          v-if="(order.productPrice == '') & (order.payStatusCode != '')"
          >积分:{{ order.payStatusCode }}</van-col
        >
        <van-col
          span="24"
          v-if="(order.productPrice != '') & (order.payStatusCode != '')"
          >积分:{{ order.payStatusCode }} ￥{{ order.productPrice }}</van-col
        >
      </van-row>

      <!-- 剩余支付时间 -->
      <!-- <van-row>
        <van-col span="24" class="col-time"
          >支付剩余时间： <span class="span">{{ hour }}</span
          >：<span class="span">{{ minute }}</span
          >：<span class="span">{{ second }}</span></van-col
        >
      </van-row> -->
    </div>

    <!-- 分割线 -->
    <div
      class="line"
      style="background-color: #f8f9f9; height: 6px; margin-top: 20px"></div>

    <!-- 选择支付方式 -->
    <van-row>
      <van-col class="choosePay">选择支付方式</van-col>
    </van-row>
    <!-- 微信支付 -->
    <van-row>
      <van-col span="24">
        <span class="weixin-text">余额支付</span>
        <van-radio-group v-model="radio" class="radio">
          <van-radio name="1"></van-radio>
        </van-radio-group>
      </van-col>
    </van-row>

    <!-- 支付按钮 -->
    <!-- 底部 -->
    <van-tabbar style="height: 13%; margin-bottom: 20px">
      <van-col span="24"
        ><van-button round type="info" class="btn" @click="updateOrder"
          >立即支付</van-button
        ></van-col
      >
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";
import { Toast } from "vant";


Vue.use(NavBar);
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      price: 10, //商品价格
      time: "", //剩余支付时间
      radio: "1",
      product: "",
      order: {},
    };
  },
  created() {
    const dataParam = this.$route.query.data;
    if (dataParam) {
      this.product = dataParam;
    }
    this.queryByOrder();
  },

  methods: {
    //根据订单号获取订单信息
    queryByOrder() {
      var _this = this;
      this.$http
        .post("/tbOrder/queryByOrder?tcount=" + this.product)
        .then(function (response) {
          console.log(response);
          if (response.data.length > 0) {
            _this.order = response.data[0];
          } else {
            _this.$message("操作失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //根据用户id获取用户余额  --- 待完成

    //修改订单信息
    updateOrder() {
      if (this.order.payStatusCode == "") {
        this.order.payStatusCode = 0;
      } else if (this.order.productPrice == "") {
        this.order.productPrice = 0;
      }
      var _this = this;
      this.$http
        .post("/tbOrder/Payupdate", this.order)
        .then(function (response) {
          console.log(response);
          if (response.data.data==303) {
             Toast("余额不足，请充值");
          } else {
            if (response.data.code == 200) {
              _this.$toast.success("支付成功");
               setTimeout(function () {
              _this.$router.push("/");
            }, 1000); // 定时时间
            } else {
              _this.$message("操作失败");
            }
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //返回上一级
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>

<style scoped>
/* 导航栏css */
.van-nav-bar__title {
  font-size: 25px;
  font-weight: bold;
  margin-top: 20px;
}

/* 商品总价css */
.van-col {
  color: red;
  font-size: 25px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: -10px;
}
.col-time {
  font-size: 18px;
  color: black;
}

/* 分割线css */
.line {
  margin-top: 30px;
}

/*选择支付方式css */
.choosePay {
  color: black;
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  margin-left: 15px;
  margin-top: 20px;
}

/* 微信支付css */
.weixin-image,
.weixin-text {
  float: left;
  margin-left: 15px;
}
.weixin-text {
  font-size: 18px;
  color: black;
  margin-top: 5px;
}

/* 单选框css */
.radio {
  float: right;
  margin-right: 15px;
}

/* 支付按钮css */
.btn {
  width: 80%;
  background-color: rgb(31, 164, 217);
  border: 0ch;
}
</style>
